<template>
  <div>
    <img class="img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5a56b920bc83820736d2260c58858bf4.jpg?f=webp">
    <img class="img" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/206eeb5a11b27d97cec3f2b2c053a083.jpg?f=webp">
    <div class="empty"></div>
    <div class="itembox">
      <div class="item" v-for="data in Fridge" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.oldprice }}
        </p>
      </div>
    </div>
    <img class="img" src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ad2af04e55330b35b6ccb50ce4128573.jpg?f=webp'>
    <div class="empty"></div>
    <img class="img" src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5ba8bdf58eee181e2fe21f4ce2788a0a.jpg?f=webp'>
    <div class="empty"></div>
    <img class="img" src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e47ab94753758ce86f7e2cc9ef205d8a.jpg?f=webp'>
    <div class="empty"></div>
    <img class="img" src='https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/050dbb577b3ef8f1b8d8675e72a7e167.jpg?f=webp'>
    <div class="itembox">
      <div class="item" v-for="data in more" :key="data.id">
        <img v-lazy="`${data.picUrl}`" class="itemimg" />
        <p class="itemp1">{{ data.name }}</p>
        <p class="itemp2">{{ data.detail }}</p>
        <p class="itemp3">
          <span class="imgp3-span">￥</span>{{ data.price }}
        </p>
      </div>
    </div>
    <div class="btm"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      Fridge: [],
      more: []
    }
  },
  methods: {
    getFridge () {
      this.request.get('/TvMore').then((res) => {
        this.Fridge = res.data.Fridge
      })
    },
    getMore () {
      this.request.get('/HomeAppliancesMore').then((res) => {
        this.more = res.data
      })
    }
  },
  mounted () {
    this.getFridge()
    this.getMore()
  }
}
</script>

<style lang="less" scoped>
@overflowtext: {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
};
@boxstyle: {
  padding: 0 0.5rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #e14139;
};
.itembox {
  @boxstyle();
  .item {
    width: 7.1875rem;
    background-color: #fff;
    padding-bottom: 0.625rem;
    margin-bottom: 0.5rem;
    .itemimg {
      width: 100%;
      display: block;
    }
    .itemp1 {
      width: 85%;
      margin: 0.5rem auto 0.125rem;
      @overflowtext();
      font-size: 0.855rem;
      font-weight: bolder;
      color: #3c3c3c;
    }
    .itemp2 {
      @overflowtext();
      font-size: 0.75rem;
      color: #3c3c3c;
      margin-bottom: 0.1875rem;
    }
    .itemp3 {
      text-align: center;
      font-size: 0.855rem;
      color: #f54b4b;
      font-family: Heiti SC, STHeiti;
      font-weight: 700;
      .itemp3-span {
        font-size: 0.75rem;
      }
    }
  }
}
.empty {
  width: 100%;
  height: 0.5rem;
  background-color: #e14139;
}
.img{
    width: 100%;
    display: block;
}
.btm{
    width: 100%;
  height: 3.9375rem;
  background-color: #e14139;
}
</style>
